<template>
  <div class="box">
    <van-search placeholder="搜索商品" v-model="padss" shape="round" @keypress.enter="addHistory">
      <template>
        <van-icon name="arrow-left" size="25" @click="$router.go(-1)" />
      </template>
    </van-search>
    <div class="history" v-show="historyShow">
      <div class="room">
        <p>历史记录</p>
        <p>
          <van-icon name="delete" @click="remove"></van-icon>
        </p>
      </div>
      <div class="fyh_list">
        <div class="item" v-for="(item,index) in history" :key="index">{{item}}</div>
      </div>
    </div>
    <div class="list" v-show="!historyShow">
      <ul>
        <li v-for="(item,index) in sear" :key="index">
          <img :src="item.pic" alt />
          <p>{{item.title}}</p>
          <p>￥{{item.price}}</p>
        </li>
      </ul>
    </div>
    <!-- <div class="list" v-if="sear.length > 0">
      <ul>
        <li v-for="(item,index) in sear" :key="index">
          <img :src="item.pic" alt />
          <p>{{item.title}}</p>
          <p>￥{{item.price}}</p>
        </li>
      </ul>
    </div>-->
    <!-- <div class="list" v-else>
      <ul>
        <li v-for="(item,index) in list" :key="index">
          <img :src="item.pic" alt />
          <p>{{item.title}}</p>
          <p>￥{{item.price}}</p>
        </li>
      </ul>
    </div>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      padss: "",
      xian: false,
      historyShow: true,
      history: [],
    };
  },
  computed: {
    sear() {
      let data = this.list;

      if (this.padss == "") {
        this.historyShow = true;
        return [];
      }

      this.historyShow = false;

      return data.filter((item) => {
        return item.title.indexOf(this.padss) > -1;
      });
    },
  },
  created() {},
  mounted() {
    this.sou();
  },
  methods: {
    getHistory() {
      this.history = this.$store.state.lativ_history;
    },
    addHistory() {
      if (this.padss == "") {
        return false;
      }

        // 添加
      this.history.unshift(this.padss);

      //超出总条数，尾部删除
      if (this.history.length > 6) {
        this.history.pop();
      }

      this.$store.commit("addHistory", this.history);
      this.getHistory();
      this.padss = "";
    },
    remove() {
      this.$store.commit("addHistory", []);
      this.getHistory();
    },
    sou() {
      this.$axios({
        url: "/list.json",
      }).then((res) => {
        this.list = res.result;
        console.log(res);
      });
    },
  },
};
</script>

<style scoped lang="less">
.list {
  width: 100%;
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 48%;
      height: 2.18rem;
      // display: flex;
      // flex-wrap: wrap;
      img {
        width: 1.4rem;
        height: 1.4rem;
      }
      p {
        font-size: 0.18rem;
      }
    }
  }
}
.room {
  display: flex;
  font-size: 0.16rem;
}
.fyh_list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 24%;
    background-color: #f4f4f4;
    font-size: 0.16rem;
    margin: 1%;
    text-align: center;
    color: #ffffff;
  }
}
</style>
